<template>
  <div>
    <to-search></to-search>
    <div class="cate">
      <div class="con">
        <!--3.遍历 左侧 -->
        <div class="left">
          <div
            v-for="(item, index) in list"
            :key="item.id"
            :class="n == index ? 'active' : ''"
            @click="pageMove(index)"
          >
            {{ item.catename }}
          </div>
        </div>
        <div class="right">
          <div class="item" ref="item" v-for="item in list" :key="item.id">
            <div class="h2">{{ item.catename }}</div>
            <div class="content">
              <div
                class="i"
                v-for="i in item.children"
                :key="i.id"
                @click="$router.push('/list?id=' + i.id + '&type=2')"
              >
                <img class="img" :src="$pre + i.img" alt="" />
                <div class="text">{{ i.catename }}</div>
              </div>
              <van-empty v-if="!item.children" description="暂无数据" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetcates } from "../../http/http";
export default {
  data() {
    return {
      list: [],
      n: 0,
    };
  },
  mounted() {
    this.getCatesList();
  },
  methods: {
    async getCatesList() {
      let { data: res } = await reqGetcates();
      if (res.code == 200) {
        this.list = res.list ? res.list : [];
      }
    },
    pageMove(i) {
      this.n = i;
      this.$refs.item[this.n].scrollIntoView({
        behavior: "smooth",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cate {
  background: #f4f4f4;

  .con {
    height: calc(100vh - 0.6rem - 0.54rem);

    display: flex;
    .left {
      width: 2rem;
      margin-right: 0.1rem;
      background: white;
      font-size: 0.2rem;
      div {
        text-align: center;
        line-height: 0.6rem;
      }
      .active {
        background: orange;
        color: #fff;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      .item {
        margin: 0.1rem;
        background: white;

        .h2 {
          font-weight: bold;
          line-height: 0.6rem;
        }
        .content {
          overflow: hidden;
          .i {
            float: left;
            width: 33.33%;
            text-align: center;
            .img {
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 50%;
            }
            .text {
              font-size: 0.2rem;
            }
          }
        }
      }
    }
  }
}
</style>